<template>
  <div id="index" style="margin-top: -10%">
    <van-nav-bar
        title="推荐"
        left-text="返回"
        right-text="关注"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <div  style="display:inline;text-align: center; width: 270px;">
      <div style="text-align: center;font-size: 25px;padding-left:10px;;padding-right:20px;vertical-align: middle;display: inline-block;height: 50%">
        <router-link to="/hot"><i class="el-icon-collection"></i></router-link>
      </div>
      <el-autocomplete
          debounce="0"
          class="inline-input"
          v-model="value1"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
      ><el-button slot="append" icon="el-icon-search" @click="Paasas"></el-button></el-autocomplete>
      <div style="text-align: center;font-size: 25px; padding-left:20px;vertical-align: middle;display: inline-block;height: 50%">
        <router-link to="/hot"><i class="el-icon-collection"></i></router-link>
      </div>
    </div>

    <!--        轮播图-->
    <Fluid></Fluid>

    <van-tabs @click="bookTypeClick">
      <!--            商品分类-->
      <van-tab v-for="item in bookType" :key="item" :title=item.typeName>
        <!--商品展示-->
          <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="onLoad"
          >
               <van-cell style="display:inline-block;width: 150px; margin-right: 4px;margin-left: 20px" v-for="book in listbook" :key="book">
                     <router-link to="/bookDetail" >
                         <div @click="sendId(book)">
                    <van-image
                            style="display: block"
                            width="120"
                            height="110"
                            :src=book.bookImg
                    />
                    <span style="display:block;font-weight: bold;font-size: 13px">{{book.bookName}}</span>
                    <sapn style="display:block;color: red;font-size: 18px">￥{{book.bookPrice}}</sapn>
                             </div>
                         </router-link>
                <router-link to="/yonghuDetail">
                    <div @click="yonghuDetail(book.userId)">
                        <van-image
                                round
                                width="20"
                                height="20"
                                :src=book.userImg
                        />
                    <span style="color: blue">{{book.userName}}</span>
                        <div style="height:20px">
                        </div>
                    </div>
                    </router-link>
                </van-cell>
          </van-list>

      </van-tab>

    </van-tabs>

    <!--      用来展示没有更多-->
    <div style="height: 50px"></div>
  <buttom/>
  </div>
</template>

<script>
import Toast from "vant/lib/toast";
import Fluid from "@/components/fluid"
import buttom from "./book/buttom";
export default {
  name: "index",
  components:{
    Fluid,
      buttom,
  },
  data() {
    return {
      //懒加载计数
      j:0,
        //懒加载数据
        listbook:[],
      loading: false,
      finished: false,
      value: '',
      active: 2,
      list:[{id:"1",name:"a"},{id:"2",name:"b"},{id:"3",name:"c"}],
      bookType:[],
      bookUserList:[],
      type:'',
      bookList:[],
      typeName:'',
      value1:'',
      userId:'',
      username:this.$store.state.userinfo.user == null?this.$store.state.userinfo.user.user.username:""
    };
  },
  methods:{
    querySearch(queryString, cb) {
      var  _this=this;
      if (queryString===''){
        this.value1=null
      }
      // 调用 callback 返回建议列表的数据
      this.axios.get('/book/searchAll/',{params:{
          Name:this.value1,
          type:this.typeName,
        }}
      ).then(Response => {
        _this.bookList = Response.data.data.bookList;
        let arr = [];
        for (let i=0;i<_this.bookList.length;i++) {
          arr.push(_this.bookList[i].bookName);
        }
        let set = new Set(arr);
        let newArr = Array.from(set);
        let arr1=[];
        for (let i=0;i<newArr.length;i++){
          let obj = {};
          obj.value = newArr[i];
          arr1.push(obj);
        }
        _this.bookList = arr1;
        cb(_this.bookList);
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSelect(item) {
      console.log(item);
    },
    Paasas(){
      this.j=0;
      this.listbook=[];
      this.bookUserList=[];
      if (this.value1===''){
        this.value1=null
      }
      this.axios.get('/book/searchbytype/',{params:{
          Name:this.value1,
          type:this.typeName
        }}
      ).then((response) => {
        if(response.data.data.bookList.length < 4){
          this.listbook=response.data.data.bookList
        }else {
          this.finished=false
          this.bookUserList=response.data.data.bookList
          this.onLoad();
        }
      })
          .catch((error) => {
            console.log(error);
          });
    },
      //用户详情页/传用户的id
      yonghuDetail(uId){
          sessionStorage.setItem("userId",JSON.stringify(uId));
      },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      let m=this.j;
      setTimeout(() => {
        for (let i= m; i < 4+m; i++) {
          this.listbook.push(this.bookUserList[i]);
          this.j=i+1;
          if(this.j==this.bookUserList.length){
            break;
          }
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.listbook.length >= this.bookUserList.length) {
          this.finished = true;
        }
      }, 1500);

    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      // Toast('按钮');
      this.$router.push({path: "/SubscribeList"})
    },
    //获取对应类型的图书
    bookTypeClick(title){
      this.j=0;
      this.listbook=[];
      this.bookUserList=[];
      this.typeName=this.bookType[title].typeName
      if(title==0){
        this.getGuessLike()
      } else {
        var _this = this;
        _this.axios.post(
            "/book/bookByType",
            {
              type:this.bookType[title].typeName
            }
        ).then(function (resp) {
          if(resp.data.data.bookTypeList.length < 4){
            _this.listbook=resp.data.data.bookTypeList
          }else {
            _this.finished=false
            _this.bookUserList=resp.data.data.bookTypeList
            this.onLoad();
          }

        })
      }
    },

    sendId(obj) {
      //向详情页发送该商品的所有信息
      sessionStorage.setItem("book",JSON.stringify(obj));
      var userNameId=""+obj.id+","+this.$store.state.userinfo.user.user.username;
      this.guessLike(userNameId);
      //把书的信息返回到后台
      this.sendBookId(obj.id);
    },
    //把书的信息返回到后台
    sendBookId(id){
      var _this=this;
      _this.axios({
        method:"get",
        url:"/book/getBookId/"+id,
      }).then(()=>{
      })
    },
    //猜你喜欢传id存在redis里
    guessLike(obj){
      //点击一次发送一次id
      var _this=this;
      _this.axios({
        method:"get",
        url:"/book/bookLikeId/"+obj
        // eslint-disable-next-line no-unused-vars
      }).then(function (resp) {
      })
    },
    //猜你喜欢，获取猜你喜欢的商品信息
    getGuessLike(){
      var  _this=this;
      if(_this.username==""){
        _this.axios({
          method:"post",
          url:"/book/getBookNullUser"
        }).then(function (resp) {
          _this.bookUserList=resp.data.data.bookLikeList
        })
      }
      else {
        _this.axios({
          method: "get",
          url: "/book/getLikeBook/" + _this.username
        }).then(function (resp) {
          _this.bookUserList = resp.data.data.bookLikeList

        })
      }
    },
    //图书的分类
    getBookType(){
      var _this=this;
      _this.axios({
        method:"post",
        url:"/book/bookType",
      }).then(function (resp) {
        console.log(resp.data)
        _this.bookType=resp.data.data.bookTypeList;
        console.log(_this.bookType)
      });
    }
  },

  mounted() {
    var _this=this;
    _this.getBookType();
    //查找你喜欢的商品
    _this.getGuessLike();
  }
}
</script>

<style lang="css">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>